<!DOCTYPE html>
<html lang="en">
  <head>
    <title>File upload and download</title>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="https://loopback.io/favicon.ico"
    />

    <style>
      h3 {
        margin-left: 25px;
        text-align: center;
      }

      a,
      a:visited {
        color: #3f5dff;
      }

      h3 a {
        margin-left: 10px;
      }

      a:hover,
      a:focus,
      a:active {
        color: #001956;
      }

      .power {
        position: absolute;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
      }

      .info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .info h1 {
        text-align: center;
        margin-bottom: 0;
      }

      .info p {
        text-align: center;
        margin-bottom: 3em;
        margin-top: 1em;
      }
    </style>

    <script>
      /**
       * Submit the upload form
       */
      function setupUploadForm() {
        const formElem = document.getElementById('uploadForm');
        formElem.onsubmit = async e => {
          e.preventDefault();

          const res = await fetch('/files', {
            method: 'POST',
            body: new FormData(formElem),
          });

          const body = await res.json();
          console.log('Response from upload', body);

          await fetchFiles();
        };
      }

      /**
       * List uploaded files
       */
      async function fetchFiles() {
        const res = await fetch('/files');
        const files = await res.json();
        console.log('Response from list', files);
        const list = files.map(
          f => `<li><a href="/files/${f}">${f}</a></li>\n`,
        );
        document.getElementById('fileList').innerHTML = list.join('');
      }

      async function init() {
        setupUploadForm();
        await fetchFiles();
      }
    </script>
  </head>

  <body onload="init();">
    <div class="info">
      <h1>File upload and download</h1>

      <div id="upload">
        <h3>Upload files</h3>
        <form id="uploadForm">
          <label for="files">Select files:</label>
          <input type="file" id="files" name="files" multiple /><br /><br />
          <label for="note">Note:</label>
          <input
            type="text"
            name="note"
            id="note"
            placeholder="Note about the files"
          />
          <br /><br />
          <input type="submit" />
        </form>
      </div>

      <div id="download">
        <h3>Download files</h3>
        <ul id="fileList"></ul>
        <button onclick="fetchFiles()">Refresh</button>
      </div>

      <h3>OpenAPI spec: <a href="/openapi.json">/openapi.json</a></h3>
      <h3>API Explorer: <a href="/explorer">/explorer</a></h3>
    </div>

    <footer class="power">
      <a href="https://loopback.io" target="_blank">
        <img
          src="https://loopback.io/images/branding/powered-by-loopback/blue/powered-by-loopback-sm.png"
        />
      </a>
    </footer>
  </body>
</html>
